<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/退出键.png" mode="widthFix" class="back-img"></image>
			</view>
			<view class="title">猫猫主粮</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-container">
			<u-search placeholder="搜索猫猫主粮商品" v-model="keyword" disabled @click="navigateToSearch" shape="round" :showAction="false"></u-search>
		</view>
		
		<!-- 分类筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{active: activeFilter === 'comprehensive'}" @click="setFilter('comprehensive')">
				综合
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'sales'}" @click="setFilter('sales')">
				销量
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'price'}" @click="setFilter('price')">
				价格
				<text class="sort-icon" v-if="activeFilter === 'price'">
					<text v-if="priceSort === 'asc'">↑</text>
					<text v-else-if="priceSort === 'desc'">↓</text>
					<text v-else>↕</text>
				</text>
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'filter'}" @click="setFilter('filter')">
				筛选
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(item, index) in productList" :key="index" @click="navigateToDetail(item.id)">
				<view class="product-left">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="product-info">
					<view class="product-name">{{item.name}}</view>
					<view class="product-tags">
						<text class="tag tag-main" v-if="item.tags && item.tags.includes('天然')">天然</text>
						<text class="tag tag-sub" v-if="item.tags && item.tags.includes('无谷')">无谷</text>
					</view>
					<view class="product-sale-info">
						<text class="sale-count">已售{{item.sales}}件</text>
					</view>
					<view class="product-promotion">
						<view class="promotion-tag" v-if="item.freeShipping">满97包邮</view>
						<view class="promotion-tag" v-if="item.promotion">{{item.promotion}}</view>
					</view>
					<view class="product-price-row">
						<view class="price-info">
							<text class="price-symbol">¥</text>
							<text class="product-price">{{item.price}}</text>
							<text class="price-tag" v-if="item.priceTag">{{item.priceTag}}</text>
							<text class="product-original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
						</view>
						<view class="cart-btn">
							<image src="/static/cart/add-cart-btn.png" mode="widthFix" class="cart-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeFilter: 'comprehensive',
				priceSort: '', // 可以是 'asc' 或 'desc' 或空字符串
				productList: [
					{
						id: 1,
						name: '顶级猫粮鲜肉烘焙全期猫粮5kg',
						price: 159.8,
						originalPrice: 199.9,
						sales: 3201,
						image: '/static/猫猫专区.png',
						promotion: '满199减30',
						freeShipping: true,
						tags: ['天然', '无谷']
					},
					{
						id: 2,
						name: '幼猫专用奶糕猫粮天然无谷2kg',
						price: 89.9,
						originalPrice: 129.9,
						sales: 2871,
						image: '/static/猫猫专区.png',
						promotion: '第二件半价',
						priceTag: '特惠价',
						freeShipping: true,
						tags: ['天然']
					},
					{
						id: 3,
						name: '成猫粮三文鱼配方增肥发腮10kg',
						price: 218.5,
						sales: 1893,
						image: '/static/猫猫专区.png',
						freeShipping: true,
						tags: ['无谷']
					},
					{
						id: 4,
						name: '老年猫配方猫粮关节护理配方3kg',
						price: 129.9,
						originalPrice: 159.9,
						sales: 2054,
						image: '/static/猫猫专区.png',
						promotion: '限时特惠',
						freeShipping: true,
						tags: ['天然', '无谷']
					}
				],
				keyword: '' // 搜索关键词
			}
		},
		onLoad(options) {
			this.loadProductData();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					fail: function() {
						uni.switchTab({
							url: '/pages/shop/cat-products',
							fail: function() {
								uni.redirectTo({
									url: '/pages/shop/cat-products'
								});
							}
						});
					}
				});
			},
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages/search/index',
					fail: function(err) {
						console.error('导航到搜索页面失败:', err);
						uni.showToast({
							title: '搜索功能即将上线',
							icon: 'none'
						});
					}
				});
			},
			setFilter(filter) {
				if(filter === 'price' && this.activeFilter === 'price') {
					// 如果已经是价格筛选，则切换排序方向
					if(this.priceSort === 'asc') {
						this.priceSort = 'desc'
					} else if(this.priceSort === 'desc') {
						this.priceSort = ''
					} else {
						this.priceSort = 'asc'
					}
				} else {
					this.activeFilter = filter
					if(filter !== 'price') {
						this.priceSort = ''
					} else if(this.priceSort === '') {
						this.priceSort = 'asc'
					}
				}
				// 根据筛选条件重新加载数据
				this.loadProductData()
			},
			navigateToDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/product-detail?id=' + id,
					fail: function(err) {
						console.error('导航到商品详情失败:', err);
						uni.showToast({
							title: '商品详情加载失败',
							icon: 'none'
						});
					}
				});
			},
			loadProductData() {
				let params = {
					categoryId: 201, // 猫猫主粮分类ID
					page: 1,
					size: 20
				};

				if (this.activeFilter === 'sales') {
					params.sortBy = 'sales';
					params.order = 'desc';
				} else if (this.activeFilter === 'price') {
					params.sortBy = 'price';
					params.order = this.priceSort || 'asc';
				}

				this.$api.productApi.getList(params)
					.then(res => {
						if (res && res.data) {
							this.productList = res.data;
						}
					})
					.catch(err => {
						console.error("获取猫猫主粮失败", err);
						uni.showToast({
							title: '商品加载失败',
							icon: 'none'
						});
					});
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 20rpx;
		background-color: #F8F8F8;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.back-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.back-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	.search-container {
		padding: 6rpx 20rpx 0 20rpx;
		background-color: #FFFFFF;
		
		/deep/ .u-search {
			padding: 10rpx 0;
			
			&__content {
				background-color: #F5F5F5;
			}
		}
	}
	
	.filter-bar {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.filter-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		position: relative;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.filter-item.active {
		color: #FF0000;
		font-weight: bold;
	}
	
	.sort-icon {
		margin-left: 4rpx;
		color: #999;
	}
	
	.product-list {
		padding: 15rpx 20rpx;
	}
	
	.product-item {
		display: flex;
		padding: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		border-radius: 8rpx;
	}
	
	.product-left {
		margin-right: 20rpx;
	}
	
	.product-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}
	
	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product-name {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}
	
	.product-tags {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.tag {
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
	
	.tag-main {
		background-color: #F5F5F5;
		color: #333;
	}
	
	.tag-sub {
		background-color: #F5F5F5;
		color: #666;
	}
	
	.product-sale-info {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.product-promotion {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	
	.promotion-tag {
		background-color: #FFF1F1;
		color: #FF6600;
		font-size: 22rpx;
		padding: 2rpx 8rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}
	
	.product-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.price-info {
		display: flex;
		align-items: baseline;
	}
	
	.price-symbol {
		color: #FF0000;
		font-size: 24rpx;
	}
	
	.product-price {
		color: #FF0000;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 8rpx;
	}
	
	.price-tag {
		background-color: #FFF1F1;
		color: #FF6600;
		font-size: 20rpx;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}
	
	.product-original-price {
		color: #999999;
		font-size: 24rpx;
		text-decoration: line-through;
	}
	
	.cart-btn {
		width: 60rpx;
		height: 60rpx;
	}
	
	.cart-icon {
		width: 100%;
		height: 100%;
	}
</style> 